<template>
    <div class="g-bd clear-block">
        <AsideRank></AsideRank>
        <div class="right-container">
            <div class="right-inner-container">
                <TopInfo v-bind="topSongList.topInfo" />
                <div class="g-wrap">
                    <SongListWrap :songListInfo="topSongList.songListInfo"></SongListWrap>
                    <CommentWrap></CommentWrap>
                </div>

            </div>
        </div>
    </div>

</template>
<script setup>
import AsideRank from './components/AsideRank.vue';
import TopInfo from '@/components/TopInfo.vue';
import SongListWrap from '@/components/SongListWrap.vue';
import CommentWrap from '@/components/CommentWrap.vue';
import topSongList from '@/json_data/top_list/top_song_list.json'

</script>

<style lang="scss" scoped>
.g-bd {
    background: url(../assets/wrap3.png) repeat-y center 0;
    .right-container {
        height: 100%;
        float: right;
        width: 740px;
        padding-bottom: 50px;

        .g-wrap {
            padding: 0 30px 40px 40px;
        }
    }


}
</style>